<!--
 * @Author: your name
 * @Date: 2021-02-27 23:58:45
 * @LastEditTime: 2021-07-22 16:45:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-antd-koa\vue3-antd-pc\src\views\show\File.vue
-->
<template>
  <div>
    <a-card
      v-for="cardRecord of cardRecords"
      :key="cardRecord.month"
      :title="cardRecord.month"
    >
      <a-timeline>
        <a-timeline-item
          v-for="record of cardRecord.data"
          :key="record.id"
          :color="useRandomColor()"
        >
          <a-button @click="toDetailPage(record.id)">
            {{ record.createdAt }} - {{ record.title }}</a-button
          >
        </a-timeline-item>
      </a-timeline>
    </a-card>
  </div>
</template>

<script>
import { useRandomColor } from "@u/color.js";
import { watchEffect, ref } from "vue";
import http from "@u/http.js";
import { useInfoNotice } from "@u/notice.js";
import { useRoutePathToPage } from "@u/router.js";

export default {
  setup() {
    const cardRecords = ref([]);

    watchEffect(
      async () => {
        try {
          const res = await http.get("/articles/all/archives");

          cardRecords.value = res.data;
        } catch (error) {
          useInfoNotice({
            message: "获取失败",
            description: error.reason,
          });
        }
      },
      { flush: "post" }
    );

    const toDetailPage = (id) => {
      const toPage = useRoutePathToPage(`/details/${id}`);
      toPage();
    };

    return { cardRecords, useRandomColor, toDetailPage };
  },
};
</script>